<template>
   <div class=''>
       <Tips />
        <van-checkbox-group v-model="result" direction="horizontal" :disabled="editChange">
            
                <van-checkbox :name="item.id" v-for="item in cartList" :key="item.id"
                @click="changeGoodsVal(item)">
                    <van-swipe-cell>
                        <van-card
                            :num="item.number"
                            :price="item.retail_price"

                            :title="item.goods_name"
                            :thumb="item.list_pic_url"
                        />
                        <van-stepper v-model="item.number" v-if="editChange" @change="changeStepper(item)"/>
                        <template #right>
                            <van-button square text="删除" type="danger" class="delete-button"
                            @click="deleteFn(item.product_id)" />
                        </template>
                    </van-swipe-cell>
                </van-checkbox>
               
        </van-checkbox-group>
        <van-submit-bar :price="cartPrice*100" button-text="提交订单">
            <van-checkbox v-model="allChecked" :disabled="editChange">全选</van-checkbox>
            <template #tip>
                累计共{{cartCount }}件商品，可点击<van-button :type="editChange?'danger':'primary'" size="mini"
                 @click="editChange = !editChange">{{ editChange ?'完成编辑' : '编辑'}}</van-button>按钮进行商品数量修改
            </template>
        </van-submit-bar>
   </div>
</template>

<script>
import {getCartListData,changeGoods,stepper,deleteGoods} from '@/request/api'
import Tips from '../components/Tips.vue'
export default {
    data () {
        return {
            result: [],
            checked:"",
            cartList:[],
            cartCount:0,
            cartPrice:0,
            editChange:false,
        }
    },
    methods:{
        onClickEditAddress(){

        },
        deleteFn(pid){
            deleteGoods({
                productIds:pid.toString()
            })
            .then(res=>{
                 this.resetList(res.data)
            })
            .catch(err=>{})
        },
        // 修改步进器
        changeStepper(item){
            stepper({
                goodsId:item.goods_id,
                id:item.id,
                number:item.number,
                productId:item.product_id
            }).then(res=>{
                this.resetList(res.data)
            }).catch(err=>{})
        },
        changeGoodsVal(item){
            if(this.editChange) return
            changeGoods({
                isChecked:item.checked==0?1:0,
                productIds:item.product_id
            })
            .then(res=>{
                this.resetList(res.data)
            }).catch(err=>{})
        },
        resetList(data){
            this.cartList = data.cartList
            // 清空选中数组
            this.result = []
            this.cartList.map(item=>{
                if(item.checked){
                   this.result.push(item.id) 
                }
            })
            this.cartCount = data.cartTotal.checkedGoodsCount
            this.cartPrice = data.cartTotal.checkedGoodsAmount
        }
    },
    created(){
        getCartListData()
        .then(res=>{
            console.log(res)
           this.resetList(res.data)
        }).catch(err=>{})
    },
    computed:{
       
        allChecked:{
            set(val){
                // 报存所有信息的id
                let ids_arr = [];
                this.cartList.map(item=>{
                    ids_arr.push(item.product_id)
                })
                // 请求接口
                changeGoods({
                    isChecked:val?1:0,
                    productIds:ids_arr.join(",")
                })
                .then(res=>{
                    this.resetList(res.data)
                }).catch(err=>{})
            },
            get(){
                return this.result.length==this.cartList.length?true:false
            }            
           
        }
    },
    components:{
        Tips
    }
}
</script>
<style lang="less" scoped>
/deep/.van-checkbox__label{
    flex:1;
}
.van-checkbox-group{
    padding-bottom: 1.5rem;
    .van-checkbox{
        width: 100%;
        padding: .12rem;
        background: #fff;
        margin-right:0 ;
        border-bottom:1px solid #ddd;
    }
}
.van-submit-bar{
    bottom: .5rem;
    border-bottom:1px solid #ddd;
    .van-submit-bar__tip{
        display: flex;
        align-items: center;
    }
}
.van-stepper{
    margin-top: .04rem;
    text-align: right;
}
.delete-button{
    height: 100%;
}

</style>